<template>
    <a-spin tip="Loading..." :spinning="spinning">
    <div>
        <a-row>
            <a-col span="5" align="center" justify="space-around">
                <a-row type="flex">
                    <a-button id="print_true" style="margin-right:8px" :disabled="true" @click="print_c">打印</a-button>
                    <a-button style="margin-right:8px" type="primary" @click="export_se">导出</a-button>
                    <a-modal title="导出" :visible="exportVisible2" @ok="exportOk2" @cancel="exportCancel2">
                        <a-row>
                            <a-form>
                                <a-form-item label="小区" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <a-select placeholder="请选择所属小区" v-decorator="['bd_info_id',{rules:[{required:true,message:'请选择小区'}]}]">
                                        <a-select-option v-for="(item,index) in bd_info" @click="bdPro(index)" :key="index" :value="item.id">{{item.name}}</a-select-option>
                                    </a-select>
                                </a-form-item>
                                <a-form-item label="关键字" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <a-input v-model="hi2"></a-input>
                                </a-form-item>
                            </a-form>
                        </a-row>
                    </a-modal>
                    <a-modal title="打印" :visible="print_lop" :width="600" @ok="ok_print" @cancel="cancel_print">
                        <a-row>
                            <a-col span="15">
                                模板：
                                <a-select style="width: 240px" @change="print_func">
                                    <a-select-option v-for="(item,i) in modelList" :key="i">
                                        {{item.name}}
                                    </a-select-option>
                                </a-select>
                            </a-col>
                        </a-row>
                    </a-modal>
                    <a-modal
                            title="确认窗口"
                            :visible="show_se"
                            @ok="exportOk2"
                            @cancel="export_se_cel"
                    >
                        <span v-for="(item,index) in qu_s" :key="index" style="padding: 3px;font-size: 16px">{{item}}<br /></span>
                    </a-modal>
                </a-row>
            </a-col>
            <a-col span="12" offset="7">
                <a-row type="flex" justify="space-around">
                    <!--<a-col span="4">-->
                        <!--<a-select defaultValue="1" style="width: 100%" @change="typeChange">-->
                            <!--<a-select-option value="1">充值</a-select-option>-->
                            <!--<a-select-option value="2">抵扣</a-select-option>-->
                            <!--<a-select-option value="3">退款</a-select-option>-->
                        <!--</a-select>-->
                    <!--</a-col>-->
                    <a-col span="4">
                        <a-select defaultValue="1" style="width: 100%" @change="handleChange">
                            <a-select-option value="1">住户</a-select-option>
                            <a-select-option value="2">房屋</a-select-option>
                        </a-select>
                    </a-col>
                    <a-col span="13">
                        <a-input-search v-model="hi" @search="onSearch"></a-input-search>
                    </a-col>
                    <a-col span="2">
                        <a-button @click="depFilter">
                        <a-icon type="filter" />
                        </a-button>
                        <a-modal title="筛选" :visible="v_filter" @ok="filterOk" @cancel="filterCancel">
                            <a-row>
                                <a-form>
                                    <a-form-item label="选择小区" :label-col="labelCol" :wrapper-col="wrapperCol">
                                        <a-select placeholder="请选择小区" @change="selectBd">
                                            <a-select-option
                                                    :value="item.id"
                                                    v-for="(item, index) in bd_info"
                                                    :key="index"
                                            >{{ item.name }}</a-select-option>
                                        </a-select>
                                    </a-form-item>
                                    <a-form-item label="类别" :label-col="labelCol" :wrapper-col="wrapperCol">
                                        <a-select placeholder="请选择类别" @change="type_click">
                                            <a-select-option :key="0" :vaule="0">全部</a-select-option>
                                            <a-select-option :key="1" :vaule="1">充值</a-select-option>
                                            <a-select-option :key="2" :vaule="2">抵扣</a-select-option>
                                            <a-select-option :key="3" :vaule="3">退款</a-select-option>
                                        </a-select>
                                    </a-form-item>
                                    <a-form-item label="金额区间" :label-col="labelCol" :wrapper-col="wrapperCol">
                                        <a-input v-on:keyup="jine_min" style="width: 45%;" placeholder="最小"></a-input>
                                        <a-input v-on:keyup="jine_max" style="margin-left:5%;width: 45%;" placeholder="最大"></a-input>
                                    </a-form-item>
                                    <a-form-item label="来源" :label-col="labelCol" :wrapper-col="wrapperCol">
                                        <a-select placeholder="请选择操作员">
                                            <a-select-option v-for="(item,index) in userAdmin" :key="index" :value="item.id" @click="admin_click(item.id)">{{item.name}}</a-select-option>
                                        </a-select>
                                    </a-form-item>
                                    <a-form-item label="时间区间" :label-col="labelCol" :wrapper-col="wrapperCol">
                                        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                                            <a-date-picker @change="start_time" style="width: 100%" />
                                        </a-form-item>
                                        <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">-</span>
                                        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                                            <a-date-picker @change="end_time" style="width: 100%" />
                                        </a-form-item>
                                    </a-form-item>
                                    <a-form-item label="预存款类型" :label-col="labelCol" :wrapper-col="wrapperCol">
                                        <a-select placeholder="请选择类型">
                                            <a-select-option v-for="(item,index) in cate_list" :key="index" :value="item.name" @click="cate_click(item.name)">{{item.name}}</a-select-option>
                                        </a-select>
                                    </a-form-item>
                                    <a-form-item label="关键字" :label-col="labelCol" :wrapper-col="wrapperCol">
                                        <a-input v-model="hi"></a-input>
                                    </a-form-item>
                                </a-form>
                            </a-row>
                        </a-modal>
                    </a-col>
                </a-row>
            </a-col>
        </a-row>
        <br>
        <a-row>
          <s-table ref="table" :columns="columns" :rowSelection="rowSelection" :data="dataSource" :scroll="{ x: 800}">
              <template slot="price" slot-scope="text, record">
                  <span><span v-if="record.type == 3">-</span>¥{{text}}<span v-if="record.money > 0 && record.type == 1">(实收金额：¥{{record.money}})</span></span>
              </template>
              <template slot="remarks" slot-scope="text, record">
                  <a-tooltip placement="left">
                      <template slot="title">
                          <p>{{text}}</p>
                      </template>
                      <a-icon type="bars" style="cursor: pointer;"></a-icon>
                  </a-tooltip>
              </template>
          </s-table>
        <a-row style="height:45px;background-color: #fafafa;border-bottom: 1px solid #e8e8e8" type="flex" justify="center">
            <a-col span="12"></a-col>
            <a-col span="3" align="center" style="line-height:45px">
              统计：
            </a-col>
            <a-col class="tdx_w" span="5" align="center" style="line-height:45px">
              预存款收入
            </a-col>
            <a-col class="tdx_w" span="4" align="center"  style="line-height:45px">
              预存款支出
            </a-col>
          
        </a-row>
        <a-row style="height:45px;background-color: #fafafa;" type="flex" justify="center">
            <a-col span="12"></a-col>
            <a-col span="3" align="center" style="line-height:45px">
              小计：
            </a-col>
            <a-col class="tdx_w" span="5" align="center" style="line-height:45px">
              ¥{{xm}}（实收金额：¥{{xm1}}）
            </a-col>
            <a-col class="tdx_w" span="4" align="center"  style="line-height:45px">
              ¥{{xm2}}
            </a-col>
          
        </a-row>
        <a-row style="height:45px;background-color: #fafafa;" type="flex" justify="center">
            <a-col span="12"></a-col>
            <a-col span="3" align="center" style="line-height:45px">
              合计：
            </a-col>
            <a-col class="tdx_w" span="5" align="center" style="line-height:45px">
              ¥{{ps|| '0'}}（实收金额：¥{{ms || '0'}}）
            </a-col>
            <a-col class="tdx_w" span="4" align="center"  style="line-height:45px">
              ¥{{xp}}
            </a-col>
          
        </a-row>
           
        </a-row>
        <div v-show="false" id="model_t">
            <div style="font-size: 20px;text-align: center;font-weight:bold;">{{print_model.name}}</div><br/>
            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                <tr style="border-bottom: 1px solid #000000;">
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">小区</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">住户</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">手机号</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">金额</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">类型</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">来源</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">时间</td>
                    <td style="font-size: 14px; text-align: center; padding: 8px 0px; border: 1px solid #000000; font-weight: 400;">备注</td>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in selectArr">
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.bd_info_id_text}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.house_user_id_text}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.phone}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.price}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.t_text}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.come_text}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.createtime}}</td>
                    <td style="font-size:14px;text-align:center;padding:8px 0;border:1px solid #000000;font-weight:400">{{item.remarks}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    </a-spin>
</template>

<script>
import { getDespositStore ,dep_det,getAllBdinfo } from '@/api/cashier'
import { mapGetters } from 'vuex'
import { getLodop } from '@/utils/LodopFuncs'
import {STable} from '@/components'
  export default {
    name: 'charge_pre_deposit_depositStore',
      components: {
          STable
      },
    data() {
        return {
            data: [],
            columns: [
                { title: '小区/楼宇', width: 100, dataIndex: 'bd_info_id_text', key: 'bd_info_id_text'},
                { title: '房号/车位/车辆', width: 100, dataIndex: 'house_name', key: 'house_name'},
                { title: '住户', width: 100, dataIndex: 'house_user_id_text', key: 'house_user_id_text' },
                { title: '手机号', dataIndex: 'phone', key: '1', width: 150 },
                { title: '金额', dataIndex: 'price', key: '2', width: 200,scopedSlots: { customRender: 'price' } },
                { title: '类型', dataIndex: 't_text', key: '3', width: 150 },
                { title: '来源', dataIndex: 'come_text', key: '4', width: 150 },
                { title: '时间', dataIndex: 'createtime', key: '5', width: 150 },
                { title: '预存款类型', dataIndex: 'category', key: '6', width: 150 },
                { title: '备注', dataIndex: 'remarks', key: '7', width: 150,scopedSlots: { customRender: 'remarks' } }
            ],
            exportVisible2:false,
            print_lop: false,
            print_m: false,
            print_model:[],
            modelList: [],
            selectArr: [],
            bd_info: [],
            hi:'',
            hi2:'',
            v_filter: false,
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 15 }
            },
            d_type:1,
            house:1,
            ps:0,
            ms:0,
            qu_s:[],
            xp:0,
            xm:0,
            xm1:0,
            xm2:0,
            spinning:false,
            mobile:'',
            jine_min_val:0,
            jine_max_val:0,
            start_time_value:'',
            end_time_value:'',
            cate_list:[],
            admin:'',
            lei:0,
            cate:'',
            show_se:false,
            type:0,
            userAdmin:[],
            pas:[],
            queryParam: {},
            dataSource:parameter => {
                this.pas = parameter;
                return this.getList(Object.assign(parameter, this.queryParam))
                    .then(res => {
                        return res
                    })
            },
            selectedRowKeys:[]
        }
    },
    computed: {
      rowSelection() {
            const { selectedRowKeys } = this;
            return {
                selectedRowKeys,
                onChange: (selectedRowKeys, selectedRows) => {
                    this.selectedRowKeys=selectedRowKeys
                    if(selectedRowKeys.length > 0) {
                        this.selectArr = selectedRows
                        document.getElementById('print_true').disabled='';
                    } else {
                        this.selectArr = []
                        document.getElementById('print_true').disabled=true;
                    }
                },
                getCheckboxProps: record => ({
                props: {
                    disabled: record.name === 'Disabled User', // Column configuration not to be checked
                    name: record.name,
                }
                }),
            }
        }
    },
    mounted() {
        this.getDepInfo();
        this.getBdList();
        this.getUser();
        this.getCate();
    },
    methods: {
        ...mapGetters(['token', 'pmsArId', 'nowMg']),
        export_se () {
            this.spinning = true;
            let dit = {bd:this.bd_info_id,
                type:this.type,
                jine_max:this.jine_max_val,
                jine_min:this.jine_min_val,
                start_time:this.start_time_value,
                end_time:this.end_time_value,
                admin:this.admin,
                lei:this.lei,
                cate:this.cate,
                mobile:this.mobile,
                house:this.house,
                hei:this.hi};
            this.axios({
                method:'post',
                url:'/cashier/dep_list_store_se',
                data:Object.assign(dit,{token:this.token()})
            }).then(res => {
                if(res.code==0){
                    this.show_se = true;
                    this.qu_s = res.msg;
                    this.spinning = false;
                }else if(res.code==1000){
                    this.spinning=false;
                }else{
                    this.spinning=false;
                    this.$message.warning(res.msg,2)
                }
            }).catch(err => {
                this.spinning=false;
                this.$message.error('服务器发生错误...',2);
            }).finally(() => {
                this.loading = false;
            })
        },
        admin_click(v){
            this.admin = v;
        },
        cate_click(v){
            this.cate = v;
        },
        type_click(v){
            this.type = v;
        },
        getUser(){
            this.axios({
                method:'get',
                url:'/community/get_bd_user',
                params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
            }).then(res => {
                let { code,msg,data } = res;
                if(code === 0){
                    this.userAdmin = data
                }else this.$message.warning(msg);
            }).catch(err => {
                this.$message.error('服务器发生错误...');
            })
        },
        getCate(){
            this.axios({
                method:'get',
                url:'/community/get_cate',
                params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
            }).then(res => {
                let { code,msg,data } = res;
                if(code === 0){
                    this.cate_list = data
                }else this.$message.warning(msg);
            }).catch(err => {
                this.$message.error('服务器发生错误...');
            })
        },
        start_time(date, dateString) {
            this.start_time_value = dateString;
        },
        end_time(date, dateString){
            this.end_time_value = dateString;
        },
        jine_min(v){
            this.jine_min_val = v.target.value;
        },
        jine_max(v){
            this.jine_max_val = v.target.value;
        },
        getBdList(){
            this.axios({
                method:'get',
                url:'/community/get_bd_config_list',
                params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
            }).then(res => {
                let { code,msg,data } = res;
                if(code === 0){
                    let ifo = {id:0,name:'所有小区'};
                    data.unshift(ifo);
                    this.bd_info = data;
                }else this.$message.warning(msg);
            }).catch(err => {
                this.$message.error('服务器发生错误...');
            })
        },
        bdPro(v){
            this.bd_info_id = this.bd_info[v].id;
        },
        depFilter(){
            this.getBd();
            this.v_filter = true;
        },
        getBd() {
            getAllBdinfo({token:this.token()})
                .then(res => {
                    this.bdInfo = res.data
                })
                .catch(err => {
                    console.log(err)
                })
        },
        selectBd(value) {
            this.bd_info_id = value;
            // this.formData.seBd = value
        },
        exportModal2() {
            this.exportVisible2 = true
        },
        exportCancel2() {
            this.exportVisible2 = false
        },
        export_se_cel(){
            this.show_se = false;
            this.spinning = false;
        },
        exportOk2() {
            this.spinning=true;
            this.show_se = false;
            this.baseExcDate={pageNo:1,pageSize:100};
            this.exportVisible2 = false;
            let qu = [];
            qu['bd'] = this.bd_info_id;
            qu['type'] = this.type;
            qu['lei'] = this.lei;
            qu['jine_max'] = this.jine_max_val;
            qu['jine_min'] = this.jine_min_val;
            qu['start_time'] = this.start_time_value;
            qu['end_time'] = this.end_time_value;
            qu['admin'] = this.admin;
            qu['cate'] = this.cate;
            qu['house'] = this.house;
            qu['mobile'] = this.mobile;
            qu['hei'] = this.hi;
            this.escec(Object.assign(this.baseExcDate, qu))
        },
        escec(param){
            this.loading = true;
            const _this=this;
            this.axios({
                method:'post',
                url:'/cashier/dep_list_store_exp',
                data:Object.assign(param,{token:this.token()})
            }).then(res => {
                if(res.code==0){
                    this.$message.success(`正在生成账单请不要刷新页面\n 当前${res.data.pageNo}/${res.data.totalPage}`,2);
                    // if(res.data.totalCount>res.data.pageNo){
                    _this.baseExcDate.pageNo=_this.baseExcDate.pageNo+1;
                    setTimeout(function(){
                        _this.escec(Object.assign(_this.baseExcDate, _this.queryParam))
                    },1400)

                    // }
                }else if(res.code==1000){
                    this.spinning=false;
                    window.location.href=this.baseURL+res.url;
                }else{
                    this.spinning=false;
                    this.$message.warning(res.msg,2)
                }
            }).catch(err => {
                this.spinning=false;
                this.$message.error('服务器发生错误...',2);
            }).finally(() => {
                this.loading = false;
            })
        },
        filterCancel() {
            this.v_filter = false;
        },
        filterOk() {
            this.v_filter = false;
            this.lei = 1;
            this.house = '';
            this.mobile = '';
            this.queryParam['mobile'] = '';
            this.queryParam['house'] = '';
            // this.queryParam['type'] = '';
            this.queryParam['bd'] = this.bd_info_id;
            this.queryParam['type'] = this.type;
            this.queryParam['jine_max'] = this.jine_max_val;
            this.queryParam['jine_min'] = this.jine_min_val;
            this.queryParam['admin'] = this.admin;
            this.queryParam['start_time'] = this.start_time_value;
            this.queryParam['end_time'] = this.end_time_value;
            this.queryParam['cate'] = this.cate;
            this.queryParam['hei'] = this.hi;
            this.$refs.table.refresh(true);
        },
        handleChange(value) {
            this.house = value;
        },
        typeChange(value) {
            this.d_type = value;
        },
        getDepInfo() {
            dep_det({token:this.token()}).then(res => {
                this.modelList = res.data.model;
            }).catch(err => {
                console.log(err)
            })
        },
        print_c(){
            LODOP = getLodop();
            this.print_lop = true;
        },
        cancel_print() {
            this.print_lop = false;
        },
        print_func(v){
            this.print_m = v + 1;
            this.print_model = this.modelList[v];
        },
        ok_print() {
            if (this.print_m) {
                LODOP = getLodop();
                LODOP.PRINT_INIT("打印通知单");
                LODOP.ADD_PRINT_HTM(this.print_model.range_t,this.print_model.range_l,600,300,document.getElementById("model_t").innerHTML);
                LODOP.SET_PRINT_PAGESIZE(this.print_model.layout,this.print_model.p_width,this.print_model.p_height,'A'+this.print_model.paper_type);
                var lit = this.selectArr;
                let money = 0;
                for (var i=0;i<lit.length;i++) {
                    money += Number(this.selectArr[i].price);
                }
                LODOP.ADD_PRINT_TEXT(120 + (30 * lit.length),30,300,20,"合计：￥" + Math.round(money * 100) / 100);
                LODOP.PREVIEW();
            } else {
                this.$message.error('请选择模板');
            }
        },
        getList(param) {
            return new Promise((resolve,reject) => {
                this.axios({
                    method:'get',
                    url: '/cashier/get_desposit_store',
                    params:Object.assign(param,{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()})
                }).then(res => {
                    if(res.code === 0){
                        resolve(res.data);
                        this.ps = res.data['p_all'];
                        this.ms = res.data['m_all'];
                        this.xp = res.data['d_all'];
                        this.xm = res.data['xp'];
                        this.xm1 = res.data['xm'];
                        this.xm2 = res.data['xz'];
                    }else{
                        this.$message.error(res.data.msg,2);
                    }
                }).catch(err => {
                    this.$message.error('服务器发生错误...',2);
                    this.loading = false;
                })
            })
        },
        onSearch(value) {
            this.queryParam['bd'] = '';
            this.queryParam['hei'] = '';
            this.lei = 0;
            this.mobile = value;
            this.queryParam['mobile'] = value;
            this.queryParam['house'] = this.house;
            // this.queryParam['type'] = this.d_type;
            this.selectedRowKeys=[];
            this.$refs.table.refresh(true);
        },
    }
  }
</script>

<style scoped>
    .tdx{
        width: 100px;
    }
    .tdx_w{
        font-weight:600;
    }
</style>